<!DOCTYPE html>
<html lang="zh-cn">
<head>
    {{template "header" .}}
    <link href="http://frankoss.oss-cn-hangzhou.aliyuncs.com/static/easyUI/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
    <link href="http://frankoss.oss-cn-hangzhou.aliyuncs.com/static/easyUI/themes/icon.css" rel="stylesheet" type="text/css">
    <title>FrankZhang的博客空间</title>
</head>
<body>
<noscript>请启用您浏览器的 JavaScript 选项！</noscript>
{{template "nav" .}}
<div class="container" style="margin-bottom: 30px">
    <form id="addCategory">
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" name="Title" placeholder="Title">
        </div>
        <button type="button" class="btn btn-default" onclick="return addCategory()">Submit</button>
    </form>
</div>

<div class="container">
    <div id="grid" style="width: 100%;"></div>
    <div id="pagination" style="background:#efefef;width: 100%;margin-top: 0"></div>
</div>
</body>
{{template "js" .}}
<script src="{{.Dir}}/static/easyUI/jquery.easyui.min.js"></script>
<script>
    function addCategory() {
        $.ajax({
            url: "category",
            method: "post",
            data: $('#addCategory').serialize(),
            success: function (data) {
                $('#pagination').pagination('select');
                $('#addCategory').form('clear')
            }
        })
    }

    $(document).ready(function () {

        $('#grid').datagrid({
            height: 527,
//            url: 'category/all',
//            method: 'get',
//            queryParams: {},//发送的额外参数。
//            idField: 'Id',
            fitColumns: true,
//            //rownumbers: true,
            singleSelect: true,//设置为 true，则只允许选中一行。
//            pagination: true,//设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
//            striped: true,//行条纹化
//            pageNumber: 1,//当设置了 pagination 属性时，初始化页码。
//            pageSize: 10,
//            pageList: [10, 20, 50, 100],
//            showFooter: true,//定义是否显示行的底部。
            columns: [[
                {field: 'Id', title: 'Id', width: 50},
                {field: 'Title', title: 'Title', width: 80},
                {field: 'Created', title: 'Created', width: 150, align: 'left'},
                {field: 'Views', title: 'Views', width: 100, align: 'left'},
                {field: 'TopicTime', title: 'TopicTime', width: 100, align: 'left'},
                {field: 'TopicCount', title: 'TopicCount', width: 100, align: 'right'},
                {field: 'TopicLastUserId', title: 'TopicLastUserId', width: 100, align: 'right'}
            ]]
        });


        $('#pagination').pagination({
            total: 1000,
            pageSize: 20,
            displayMsg: "",
            beforePageText: "",
            afterPageText: "",
            showPageList: true,
            showRefresh: true,
            onSelectPage: function (pageNumber, pageSize) {
                $(this).pagination('loading');
                $.get("category/all", {page: pageNumber, rows: pageSize}, function (data) {
                    $('#grid').datagrid('loadData', data);
                });
                $(this).pagination('loaded');
            }
        });
        $('#pagination').pagination('select');
    });

</script>
</html>